<!-- 列的详情弹窗 -->
<template>
  <el-dialog :title="colItem ? colItem.colName : '' + '详情'" v-model="dialogVisible" width="70%" modal draggable
    :close-on-click-modal="false" :append-to-body="true" :before-close="handleClose">
    <seeColData ref="seeColData"></seeColData>

    <div style="display: flex; justify-content: space-between; align-items: center">
      <el-radio-group v-model="zyType" v-if="isShowRadio" @input="changePadio">
        <el-radio-button label="1">{{ zytypebutton == 0 ? 'A面' : '左面' }}</el-radio-button>
        <el-radio-button label="2">{{ zytypebutton == 0 ? 'B面' : '右面' }}</el-radio-button>
      </el-radio-group>
      <div class="flex justify-between" style="width: 60%">
        <div>
          <span class="legend">&nbsp;<span style="background: #15a8ea"></span>&nbsp;在库&nbsp;</span>
          <span class="legend">&nbsp;<span style="background: #e06c76"></span>&nbsp;离库&nbsp;</span>
          <span class="legend">&nbsp;<span style="background: #f1f1f1"></span>&nbsp;剩余位置</span>
        </div>
        <div>
          <el-button type="primary" size="mini" @click="SeeZYData">查看当前面中所有档案/盒</el-button>
        </div>
      </div>
    </div>
    <div class="container" v-loading="loading">
      <div v-for="(row, rowIndex) in colData" :key="rowIndex" class="row">
        <div v-for="(cell, cellIndex) in row" :key="cellIndex" class="cell" @mouseenter="showBtn(cell)"
          @mouseleave="hiddenBtn" @click="handleCellPostionId(cell, cellIndex)"
          :class="{ active: cell.positionId == clickCurrentIndex }">
          <em v-for="(item, index) in cell.boxLi" :key="item.labelId">
            <span class="boxlis" :style="{
              width: OneboxWidth(cell)[index] + '%',
              background: cell.boxLi[index].storeStatus == 1 ? '#15a8ea' : '#e06c76',
            }" v-if="OneboxWidth(cell)[index] != 0"></span>
          </em>
          <em>
            <span class="amslis" :style="{
              width: `${amsCcolWidth(cell)}%`,
              background: isArchivesOut(cell)
                ? 'linear-gradient(to right, #15a8ea 70%, #e06c76 10%)'
                : '#15a8ea',
            }" v-if="amsCcolWidth(cell) != 0">
            </span>
          </em>
          <em class="emptyBox" :style="{ width: `${remainingWidth(cell)}% ` }"></em>
          <div class="overlay-text no-select">
            {{ cell.positionName }}
          </div>
          <i v-show="cell.positionId == clickCurrentIndex" :class="[
            'iconfont',
            'icon-jiaobiaoxuanzhong',
            { 'active-jiaobiao': cell.positionId == clickCurrentIndex },
          ]"></i>
          <el-button v-show="cell.positionId == currentIndex" type="info" size="mini" class="infoBtn"
            @click="handleCellClick(cell, cellIndex)">查看</el-button>
        </div>
      </div>
    </div>
    <el-empty v-if="isShowEmpty" description="暂无获取到数据"></el-empty>

    <!-- <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="SubmitPostionId">选 择</el-button>
    </span> -->

    <el-dialog width="60%" :title="innerDialogTitle + ' ' + '存放详情'" v-model="innerVisible" append-to-body>
      <el-row>
        <el-button type="primary" size="medium" @click="handleDown()">下架</el-button>
        <el-button type="primary" size="medium" @click="handleOut()">出库</el-button>
        <el-button type="primary" size="medium" @click="handleIn()">入库</el-button>
      </el-row>
      <!-- <el-table
        :data="tableData"
        style="width: 100%"
        row-key="labelId"
        max-height="500px"
        v-loading="loading"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="selection" width="55" :selectable="isRowSelectable">
        </el-table-column>
        <el-table-column prop="boxName" label="盒名/题名" min-width="120">
          <template slot-scope="{ row }">
            {{ row.boxName || row.archiveName }}
          </template>
</el-table-column>
<el-table-column prop="boxNo" label="盒号"> </el-table-column>
<el-table-column label="类型">
  <template slot-scope="{ row }">
            <el-tag type="info">{{ row.archiveName ? '档案' : '盒' }}</el-tag>
          </template>
</el-table-column>
<el-table-column prop="stageStatus" label="阶段状态">
  <template slot-scope="{ row }">
            <el-tag v-if="row.stageStatus == 0">新建</el-tag>
            <el-tag v-else-if="row.stageStatus == 1" type="success">已上架</el-tag>
            <el-tag v-else-if="row.stageStatus == 2" type="warning">已下架</el-tag>
            <el-tag v-else-if="row.stageStatus == 3" type="danger">销毁</el-tag>
          </template>
</el-table-column>
<el-table-column prop="storeStatus" label="在库状态">
  <template slot-scope="{ row }">
            <el-tag v-if="row.storeStatus == 0">未入库</el-tag>
            <el-tag v-else-if="row.storeStatus == 1" type="success">在库</el-tag>
            <el-tag v-else-if="row.storeStatus == 2" type="danger">离库</el-tag>
          </template>
</el-table-column>
</el-table> -->
      <div>
        <span v-for="(item, index) in tableData" :key="item.labelId">
          <el-popover placement="top-start" width="400" trigger="hover" :open-delay="200">
            <el-table :data="item.children">
              <el-table-column property="archiveNo" label="档号"></el-table-column>
              <el-table-column width="100" property="archiveName" label="题名"></el-table-column>
              <el-table-column property="stageStatus" label="阶段状态">
                <template slot-scope="{ row }">
                  <el-tag v-if="row.stageStatus == 0">新建</el-tag>
                  <el-tag v-else-if="row.stageStatus == 1" type="success">已上架</el-tag>
                  <el-tag v-else-if="row.stageStatus == 2" type="warning">已下架</el-tag>
                  <el-tag v-else-if="row.stageStatus == 3" type="danger">销毁</el-tag>
                </template>
              </el-table-column>
              <el-table-column property="storeStatus" label="在库状态">
                <template slot-scope="{ row }">
                  <el-tag v-if="row.storeStatus == 0">未入库</el-tag>
                  <el-tag v-else-if="row.storeStatus == 1" type="success">在库</el-tag>
                  <el-tag v-else-if="row.storeStatus == 2" type="danger">离库</el-tag>
                </template></el-table-column>
            </el-table>

            <span slot="reference" v-show="!item.archiveName" class="detailBox"
              :style="{ background: item.storeStatus == 1 ? '#6385d2e6' : '#A13635' }">
              <span class="detailBox-Index" :style="{ background: item.storeStatus == 1 ? '#6385d2e6' : '#A13635' }">{{
                index
                + 1 }}</span>
              <span class="detailBox-Text">{{ item.boxName || item.archiveName }}</span>
              <span class="detailBox-Check">
                <el-checkbox v-model="item.checked" @change="onCheckboxChange(item)"></el-checkbox>
              </span>
            </span>
          </el-popover>
          <el-popover placement="top-start" width="200" trigger="hover" :open-delay="200">
            <el-descriptions>
              <el-descriptions-item :span="5" label="题名">
                {{ item.archiveName }}
              </el-descriptions-item>
              <el-descriptions-item :span="5" label="档号">
                {{ item.archiveNo }}
              </el-descriptions-item>
              <el-descriptions-item :span="5" label="页数">
                {{ item.pageNo }}
              </el-descriptions-item>
            </el-descriptions>

            <span slot="reference" v-show="item.archiveName" class="detailAms" :style="archiveStyle(item)">
              <!-- <span class="detailAms-Index">{{ index + 1 }}</span> -->
              <span class="detailAms-Check">
                <el-checkbox v-model="item.checked" @change="onCheckboxChange(item)"></el-checkbox>
              </span>
            </span>
          </el-popover>
        </span>
      </div>
      <downShelvesDialog ref="downShelvesDialog" @update-data="changePadio" @reloadTable="reloadTable">
      </downShelvesDialog>
      <archivesOutDialog ref="archivesOutDialog" @update-data="changePadio" @reloadTable="reloadTable">
      </archivesOutDialog>
      <boxOutDialog ref="boxOutDialog" @update-data="changePadio" @reloadTable="reloadTable"></boxOutDialog>
      <archivesInDialog ref="archivesInDialog" @update-data="changePadio" @reloadTable="reloadTable"></archivesInDialog>
      <boxInDialog ref="boxInDialog" @update-data="changePadio" @reloadTable="reloadTable"></boxInDialog>
    </el-dialog>
    <span slot="footer" class="dialog-footer" v-show="showClick">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="SubmitPostionId" size="small">选择库位</el-button>
    </span>
  </el-dialog>
</template>

<script>

// import { EventBus } from '@/utils/EventBus'
import { cabinetDiv } from '@/api/rfid/virtualRepository.js'
import SeeColData from '@/components/seeColData.vue'
import downShelvesDialog from '@/views/rfid/dialog/downShelvesDialog.vue'
import archivesOutDialog from '@/views/rfid/dialog/archivesOutDialog.vue'
import boxOutDialog from '@/views/rfid/dialog/boxOutDialog.vue'
import archivesInDialog from '@/views/rfid/dialog/archivesInDialog.vue'
import boxInDialog from '@/views/rfid/dialog/boxInDialog.vue'
export default {
  name: 'colDetails',
  components: {
    SeeColData,
    downShelvesDialog,
    archivesOutDialog,
    boxOutDialog,
    archivesInDialog,
    boxInDialog,
  },
  props: {
    colItem: {
      type: Object,
      default: () => {
        return {
          colName: null,
        }
      },
    },
    upItemWidth: {
      type: Number,
      default: 0,
    },
    showClick: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      zyType: '1',
      colData: [],
      loading: false,
      innerVisible: false,
      innerDialogTitle: '',
      tableData: [],
      showFlag: false,
      currentIndex: null,
      clickCurrentIndex: null,
      activeItem: {},
      isProcessing: false, //重复点击事件的标识
      isShowRadio: false,
      isShowEmpty: false,
      slectlist: [],
      cabinetDiv: [],
    }
  },
  computed: {
    archiveStyle() {
      return (item) => {
        const color = item.storeStatus === 1 ? '#d7a651' : '#A13635'
        return {
          'border-left': `7px solid ${color}`,
          'border-right': `7px solid ${color}`,
        }
      }
    },
    // 判断库位上的档案有没有出库的
    isArchivesOut() {
      return function (val) {
        return val.archiveLi.some((item) => item.storeStatus == 2)
      }
    },
    // 计算档案占库位的宽度
    amsCcolWidth() {
      return function (val) {
        // 将val这个数组中的pageNo相加起来
        // 获取到当前库位上档案的所有宽度,
        const allAmsWidth = val.archiveLi.reduce(
          (accumulator, currentValue) => accumulator + currentValue.pageNo,
          0
        )
        // 如果这个值大于0，则进行下一步的逻辑
        if (allAmsWidth > 0) {
          // 获取到系统重定义的多少页为1厘米
          const cmPageNo = JSON.parse(localStorage.getItem('cmPageNo'))
          if (cmPageNo) {
            //  将allAmsWidth和cmPageNo比较，如果比这个小的话，就返回1，否则就allAmsWidth除以cmPageNo，保留两位小数
            if (allAmsWidth <= cmPageNo) {
              return 1
            } else {
              return parseFloat((allAmsWidth / cmPageNo / val.divWidth) * 100).toFixed(0)
            }
          } else {
            return 0
          }
        } else {
          return 0
        }
      }
    },

    // 计算每个格子的宽度
    OneboxWidth() {
      return function (val) {
        const totalWidth = val.divWidth
        return val.boxLi.map((box) => {
          const percentage = Math.round((box.boxWidth / totalWidth) * 100)
          return percentage
        })
      }
    },
    // 计算剩余的宽度
    remainingWidth() {
      return function (val) {
        const allWidth = this.OneboxWidth(val)
        const children = val.boxLi.length
        return (
          100 -
          // children -
          (this.amsCcolWidth(val) > 0 ? Number(this.amsCcolWidth(val)) : 0) -
          allWidth.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
        )
      }
    },
  },

  watch: {},
  methods: {
    // 查看当前的列的的左右数据
    SeeZYData() {
      this.$refs.seeColData.show(this.colItem, this.zyType)
    },
    async changePadio() {
      await this.getDivData(this.colItem)
    },
    showPrompt(message) {
      this.$message.info(message)
    },
    handleCellPostionId(cell) {
      if (!this.isProcessing) {
        this.isProcessing = true
        // 点击获取库位的id
        this.clickCurrentIndex = cell.positionId
        this.activeItem = cell

        const isUP = (this.upItemWidth / cell.divWidth) * 100 > this.remainingWidth(cell)
        if (isUP) {
          this.$message.error('该格子剩余空间不足，无法上架')
        }

        setTimeout(() => {
          this.isProcessing = false
        }, 1000) // 1秒后重置isProcessing
      }
    },
    // 提交库位id
    SubmitPostionId(flag) {
      const isUP =
        (this.upItemWidth / this.activeItem.divWidth) * 100 > this.remainingWidth(this.activeItem)
      if (isUP) {
        this.$message.error('该格子剩余空间不足，无法上架')
      } else {
        // EventBus.$emit('submitPostion', this.activeItem)
        this.dialogVisible = false
        this.$emit('handleClose')
      }
    },
    tableRowClassName({ row, rowIndex }) {
      // 如果row中有boxName属性，则说明是档案，否则为盒
      if (row.boxName && row.boxNo) {
        return 'box-row'
      } else if (row.archiveName && row.archiveNo) {
        return 'archive-row'
      }
    },
    isRowSelectable(row) {
      if (row.children) {
        // 有子集则禁用子集
        return true
      } else {
        return false
      }
    },
    handleSelectionChange(row) {
      this.slectlist = row
    },
    onCheckboxChange(item) {
      if (item.checked) {
        // 如果复选框被选中，则将 item 添加到 selectedItems 数组中
        if (!this.slectlist.includes(item)) {
          this.slectlist.push(item)
        }
      } else {
        // 如果复选框未被选中，则从 slectlist 数组中移除 item
        const index = this.slectlist.indexOf(item)
        if (index > -1) {
          this.slectlist.splice(index, 1)
        }
      }
    },
    showBtn(cell) {
      this.currentIndex = cell.positionId
      // 鼠标移入时显示按钮
    },
    hiddenBtn() {
      this.currentIndex = null
    },
    // 重新渲染查看表格
    reloadTable() {
      setTimeout(() => {
        const cell = this.cabinetDiv.filter((x) => x.positionName == this.innerDialogTitle)[0]

        this.handleCellClick(cell)
        this.$forceUpdate()

        this.$emit('getCabinetCol', cell.cabinetId)
      }, 1000)
    },
    // 获取每个格子的数据
    handleCellClick(cell) {
      this.cell = cell
      this.innerDialogTitle = cell.positionName
      this.tableData = this.handleArray(cell.boxLi, cell.archiveLi)
      this.innerVisible = true
    },
    // 处理数组
    handleArray(boxLi, archiveLi) {
      // 创建一个Map来存储b数组中的boxNo
      let bMap = new Map()
      boxLi.forEach((item) => {
        item.children = []
        bMap.set(item.boxNo, item)
      })
      // 创建一个新数组，复制boxLi的元素
      let newBoxLi = boxLi.slice()
      // 遍历a数组，根据boxNo将a中的对象添加到b中的对应对象中
      archiveLi.forEach((item) => {
        let bItem = bMap.get(item.boxNo)
        if (bItem) {
          if (!bItem.children) {
            bItem.children = []
          }
          bItem.children.push(item)
        } else {
          newBoxLi.push(item)
        }
      })

      const result = newBoxLi.map((item) => {
        // 如果 children 不存在，则添加一个空数组
        if (!item.children) {
          item.children = []
        }
        return item
      })
      return result
    },
    // 获取每个格子的数据
    getDivData(val) {
      this.loading = true
      const params = {
        colId: val.colId, //列id
        zy: this.zyType, //左右面
      }
      // 根据节层生成对应的格子
      cabinetDiv(params).then((res) => {
        if (res.data.code == 200) {
          this.isShowEmpty = false
          this.cabinetDiv = res.data.data
          // this.cabinetDiv.splice(0, this.cabinetDiv.length, ...res.data.data)
          this.colData = this.createCustomArray(val.leNum, val.divNum, res.data.data)
          // 延迟500ms
          setTimeout(() => {
            this.loading = false
          }, 500)
          this.reloadTable()
        } else {
          this.colData = []
          setTimeout(() => {
            this.loading = false
          }, 500)
          this.isShowEmpty = true
          this.$message.warning(res.data.message)
        }
      })
    },
    // 生成自定义长宽的格子
    createCustomArray(rows, cols, positions) {
      // 使用 Array.from 创建一个长度为 cols 的数组，数组中的每个元素都是一个长度为 rows 的数组，初始值为 null
      let result = Array.from({ length: cols }, () => Array.from({ length: rows }, () => null))
      // 遍历 positions 数组，将每个元素的 divNo 和 leNo 转换为 row 和 col，并将该元素赋值给 result 数组中的对应位置
      positions.forEach((p) => {
        let row = p.divNo - 1
        let col = p.leNo - 1
        result[row][col] = p
      })
      // 返回 result 数组
      return result
    },

    handleClose() {
      this.dialogVisible = false
    },
    show(flag, colItem, zyType) {
      this.dialogVisible = true
      if (flag == undefined) {
        this.zyType == '1'
        this.isShowRadio = true
      } else {
        this.zyType = flag
      }
      this.zytypebutton = zyType
      this.getDivData(colItem)
    },
    // 判断是否都为档案或者档案盒
    isAllArchiveOrBox() {
      const identifiers = this.slectlist.map((item) => {
        if ('boxName' in item && 'boxNo' in item) {
          return 'box'
        } else if ('archiveName' in item && 'archiveNo' in item) {
          return 'archive'
        }
        return null // 如果既不是盒也不是件，可以返回 null 或抛出错误
      })

      // 检查所有标识是否相同
      const firstIdentifier = identifiers[0]
      const allIdentifiersSame = identifiers.every((id) => id === firstIdentifier)
      return { firstIdentifier, allIdentifiersSame }
    },
    // 下架
    handleDown() {
      if (this.slectlist.length == 0) {
        this.$message.warning('请选择要下架的档案/盒')
        return
      }
      if (this.slectlist.some((item) => item.stageStatus == 2)) {
        this.$message.warning('存在不符合下架条件的档案盒')
        return
      }
      let { firstIdentifier, allIdentifiersSame } = this.isAllArchiveOrBox()
      if (allIdentifiersSame) {
        this.$refs.downShelvesDialog.add(this.slectlist, firstIdentifier)
      } else {
        this.$message.warning('请选择同一类型的档案或档案盒')
      }
    },
    // 出库
    handleOut() {
      if (this.slectlist.length == 0) {
        this.$message.warning('请选择要出库的档案/盒')
        return
      }
      let { firstIdentifier, allIdentifiersSame } = this.isAllArchiveOrBox()
      if (allIdentifiersSame) {
        if (firstIdentifier === 'box') {
          this.$refs.boxOutDialog.add(this.slectlist)
        } else {
          this.$refs.archivesOutDialog.add(this.slectlist)
        }
      } else {
        this.$message.warning('请选择同一类型的档案或档案盒')
      }
    },
    // 入库
    handleIn() {
      if (this.slectlist.length == 0) {
        this.$message.warning('请选择要入库的档案/盒')
        return
      }
      let { firstIdentifier, allIdentifiersSame } = this.isAllArchiveOrBox()
      if (allIdentifiersSame) {
        if (firstIdentifier === 'box') {
          this.$refs.boxInDialog.add(this.slectlist)
        } else {
          this.$refs.archivesInDialog.add(this.slectlist)
        }
      } else {
        this.$message.warning('请选择同一类型的档案或档案盒')
      }
    },
  },
  created() { },
  mounted() { },
}
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  // width: 300px;
  margin: 10px auto;
  border: 1px solid #ccc;
  max-height: 60vh;
  overflow: hidden;
  overflow: auto;
}

.row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

.cell:hover {
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
    0 5px 12px 4px rgba(0, 0, 0, 0.09);
}

.cell {
  position: relative;
  width: 100%;
  // flex: none; /* 确保每个盒子不会自动调整大小 */
  // min-width: calc(100% / 6.2); /* 确保至少有6个盒子的宽度 */
  height: 80px;
  padding: 5px;
  font-size: 16px;
  cursor: pointer;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;

  // 强制一行展示
  white-space: nowrap;
  // 溢出隐藏
  overflow: hidden;
  // 文字超出部分用省略号表示
  text-overflow: ellipsis;

  span {
    // margin-right: 1%;
    border-right: 1px solid #fff;
    box-sizing: border-box;

    &:last-child {
      margin-right: 0;
    }
  }

  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #606266;
    text-align: center;
    // 强制一行展示
    white-space: nowrap;
    // 溢出隐藏
    overflow: hidden;
    // 文字超出部分用省略号表示
    text-overflow: ellipsis;
    opacity: 0.5;
    z-index: 999;
    /* 确保此元素在绝对定位元素之上 */
    padding: 5px;
  }

  .amstext {
    position: absolute;
    top: 70%;
    // left: 80%;
    color: #4e5053;
    text-align: center;
    // 强制一行展示
    white-space: nowrap;
    // 溢出隐藏
    overflow: hidden;
    // 文字超出部分用省略号表示
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.5;
    z-index: 999;
    /* 确保此元素在绝对定位元素之上 */
    padding: 5px;
  }
}

.emptyBox {
  position: relative;
  z-index: 1;
  background: #f1f1f1;
  height: 100%;
  display: inline-block;
}

.infoBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99;
}

.row:last-child .cell {
  border-bottom: 1px solid #ccc;
}

.active {
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
    0 5px 12px 4px rgba(0, 0, 0, 0.09);
}

.active-jiaobiao {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 99;
  color: #5a9cf8;
  font-size: 1rem
    /* 60/192 */
  ;
}

.boxlis {
  height: 100%;
  display: inline-block;
}

.amslis {
  height: 100%;
  display: inline-block;
}

.legend {
  text-align: center;

  span {
    width: 20px;
    height: 10px;
    display: inline-block;
  }
}

.el-table {
  .archive-row {
    background: #d9ecff;
  }
}

.scrollable-row {
  overflow-x: auto;
  /* 添加水平滚动条 */
  overflow-y: auto;
  /* 添加垂直滚动条 */
  white-space: nowrap;
  /* 保持内容在同一行，以便显示水平滚动条 */
}

// 存放详情的样式开始

// 定义总档案盒的变量
@boxWidth: 40px;
@boxHeight: 200px;
@boxBackground: #6385d2e6;

.detailBox {
  display: inline-block;
  // background: @boxBackground;
  width: @boxWidth;
  height: @boxHeight;
  margin: 0 2px;
  border-radius: 3px;
  position: relative;

  .detailBox-Index {
    position: absolute;
    top: 10%;
    left: 50%;
    width: @boxWidth;
    height: calc(@boxHeight * 0.15);
    color: #fff;
    transform: translate(-50%, -50%);
    // background: #6385d2e6;
    filter: brightness(70%);
    /* 降低亮度 */
    // 文字水平垂直居中
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .detailBox-Text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(@boxWidth * 0.8);
    height: calc(@boxHeight * 0.6);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    // 文字竖向展示
    writing-mode: vertical-rl;
    // 强制一行展示
    white-space: nowrap;
    // 溢出隐藏
    overflow: hidden;
    // 文字超出部分用省略号表示
    text-overflow: ellipsis;
  }

  .detailBox-Check {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.detailAms {
  display: inline-block;
  // border-left: 7px solid #d7a651;
  // border-right: 7px solid #d7a651;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  width: 0;
  height: 190px;
  margin: 0 2px;
  position: relative;

  .detailAms-Index {
    position: absolute;
    top: 10%;
    left: 50%;
    width: @boxWidth;
    height: calc(@boxHeight * 0.15);
    color: #fff;
    transform: translate(-50%, -50%);
    // 文字水平垂直居中
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .detailAms-Check {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.detailAms::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 190px;
  background-color: rgb(215, 195, 195);
  transform: translateX(-50%);
}

// 存放详情的样式结束</style>
